@import "header.html"
<link rel="stylesheet" href="../css/cancel_order.css">
<link rel="stylesheet" href="../css/mobileSelect.css">


<body>
<main id="main" v-cloak>

    <header class="fxj-header" v-show="succese_page">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>发布成功</h1>
    </header>


    <header class="fxj-header" @click="back(5)" v-show="basic">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>基本信息</h1>
    </header>

    <header class="fxj-header" @click="toadd_addressmain" v-show="add_address_page&&location">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>房源地址</h1>
    </header>

    <header class="fxj-header" @click="toBasic" v-show="!add_address_page&&location">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>房源地址</h1>
    </header>

    <header class="fxj-header" @click="back(6)" v-show="introduce">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>房源介绍</h1>
    </header>

    <header class="fxj-header" @click="back(1)" v-show="pictureGuid">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>图片示例</h1>
    </header>

    <header class="fxj-header" @click="back(2)" v-show="setPicture">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>设置图片</h1>
    </header>

    <header class="fxj-header" @click="back(3)" v-show="chargeRule.main&&chargeRule.menu">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>发布规则</h1>
    </header>

    <header class="fxj-header" @click="back" v-show="mainpage">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>发布房源</h1>
    </header>

    <header class="fxj-header" @click="introduceChild(0)" v-show="setIntroduce">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>详情设置</h1>
    </header>


    <header class="fxj-header" @click="chargeRuleType(5)" v-show="chargeRule.footer">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak></h1>
    </header>

    <header class="fxj-header" @click="bedPage(3)" v-show="bedSet.page1">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>床位设置</h1>
    </header>

    <header class="fxj-header" @click="bedPage(1)" v-show="bedSet.page2">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>增加床位</h1>
    </header>

    <header class="fxj-header" @click="toBasic" v-show="infrastructure">
        <a href="#"> &nbsp;<</a>
        <h1 class="fxj-title" v-cloak>基础设施</h1>
    </header>


    <main class="pub_main" id="step1" v-show="location" v-cloak>
        <div class="main_map" id="map" v-show="add_address_page">

        </div>
        <span style="width: 10px;height: 10px;background: red;border-radius: 5px;z-index: 100;position: fixed;left: 48%;top: 7.05rem"
              v-show="add_address_page"></span>
        <span style="width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 15px solid red;position: fixed;left: 48%;top: 7.20rem"
              v-show="add_address_page"></span>
        <div class="pub_location" v-show="add_address_page">
            <div class="pub_location_title">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-location-c-o"></use>
                </svg>
                <span><strong>房 源 位 于</strong></span>
            </div>
            <div class="location_content">
                <div class="mui-content">
                    <ul class="mui-row">
                        <li class="mui-table-view-cell">
                            <input type="text" class="location_input halfinput" readonly placeholder="请选择省/市"
                                   v-model="basic_info.province_block" id="house_area">|
                            <input type="text" class="location_input halfinput" readonly placeholder="请选择区县"
                                   v-model="basic_info.city_area" id="selectdistrict">
                        </li>
                        <li class="mui-table-view-cell"><input type="text" class="location_input" readonly
                                                               placeholder="请拖动地图并点击按钮选择街道"
                                                               v-model="add_address.street">
                            <button class="mui-btn mui-btn-orange " @click="mapchose">选择</button>
                        </li>
                        <li class="mui-table-view-cell"><input type="text" class="location_input"
                                                               placeholder="填写详细地址，精确到小区"
                                                               v-model="add_address.detailAddress"></li>
                        <li class="mui-table-view-cell"><input type="text" class="location_input"
                                                               placeholder="栋单元门牌号(对房客保密)"
                                                               v-model="add_address.houseNumber"></li>
                    </ul>
                </div>
            </div>
            <span class="span_label">您的门牌号信息将只对预定了的房客展示，</span>
            <br>
            <span class="span_label">如1栋2单元2306</span>
        </div>


        <div class="mui-content" v-show="!add_address_page">


            <ul class="mui-row marrow center" id="sssssss">
                <li class="mui-table-view-cell basicCell centerCell" @click="setAddressId(add.id)"
                    v-for="add in address_list" :class="{ 'highlight' : add.active}">
                    <span class="bedspan_m left_20">{{add.mes}}</span>

                </li>
            </ul>

            <ul class="mui-row marrow center">
                <li class="mui-table-view-cell basicCell cirli" @click="toadd_address()">
                    <span>+</span>
                </li>
            </ul>

        </div>

    </main>


    <!--<main v-show="step2" class="pub_main" v-cloak>-->
    <!--<div class="title_type1">-->
    <!--<span><strong>出 租 房 源 类 型</strong></span>-->
    <!--</div>-->
    <!--<div class="mui-content content" >-->
    <!--<ul class="mui-row">-->
    <!--<li class="mui-table-view-cell">-->
    <!--<span class="big">单间出租</span> <span class="cell-radio"></span>-->
    <!--<br>-->
    <!--<span class="small">房客享有整套房屋的使用权</span>-->
    <!--</li>-->

    <!--<li class="mui-table-view-cell">-->
    <!--<span class="big">整套出租</span><span class="cell-radio"></span>-->
    <!--<br>-->
    <!--<span class="small">房客只能使用预定的房间和公共设施</span>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--<div class="title_type2">-->
    <!--<span class="title_span"><strong>房 屋 类 型</strong></span>-->
    <!--<div class="mui-content" >-->
    <!--<ul class="mui-row">-->
    <!--<li class="mui-table-view-cell house_varity">-->
    <!--<input type="text" id="varitySelect" readonly placeholder="请选择                                                           >">-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--</div>-->
    <!--</main>-->


    <main v-show="mainpage" class="pub_main" v-cloak style="display: none">

        <div class="main_center">
            <img :src="cover_src" alt="">
        </div>


        <div class="main_body">
            <div class="mui-content content top_1rem">
                <ul class="mui-row ">
                    <li class="mui-table-view-cell  bigcell" @click="toBasic">
                        <span class="bigSpan">基本信息</span>
                        <span class="rightSpan">点击查看></span>
                        <br>
                        <span class="smallSpan">房屋基本信息</span>
                    </li>
                    <li class="mui-table-view-cell  bigcell" @click="toIntroduce">
                        <span class="bigSpan">房源介绍</span>
                        <span class="rightSpan">点击查看></span>
                        <br>
                        <span class="smallSpan">房源标题以及介绍</span>
                    </li>
                    <li class="mui-table-view-cell  bigcell" @click="toSetPicture">
                        <span class="bigSpan">房源图片</span>
                        <span class="rightSpan">点击查看></span>
                        <br>
                        <span class="smallSpan">房源图片设置</span>
                    </li>
                    <li class="mui-table-view-cell  bigcell" @click="toSetRule">
                        <span class="bigSpan">收费规则</span>
                        <span class="rightSpan">点击查看></span>
                        <br>
                        <span class="smallSpan">价格设置及规则要求</span>
                    </li>
                </ul>
            </div>

            <div class="bk_content">
                <span class="spanCheck">√</span>
                <span>已阅读并同意</span>
                <span class="orange">《房源上线规则》</span>
            </div>
        </div>
    </main>

    <main v-show="pictureGuid" class="pub_main" v-cloak>
        <div class="mui-slider">
            <div class="mui-slider-group">
                <div class="mui-slider-item"><a><img src="../image/publish/sample1.jpg"/></a>
                    <div class="sliderBody">
                        <span class="sliderTitle">客 厅 展 示 图</span>
                        <br>
                        <span class="sliderSmall">客厅整体视图，格局端正，一目了然</span>
                        <br>
                        <span class="sliderSmaller">客厅图必传</span>
                        <br>
                        <div class="sliderpoint">
                            <span class="orange"></span><span></span><span></span><span></span>
                        </div>
                    </div>
                </div>

                <div class="mui-slider-item"><a><img src="../image/publish/sample2.jpg"/></a>
                    <div class="sliderBody">
                        <span class="sliderTitle">卧 室 展 示 图</span>
                        <br>
                        <span class="sliderSmall">卧室整体视图，以及不同角度床位特写</span>
                        <br>
                        <span class="sliderSmaller">卧室图必传</span>
                        <br>
                        <div class="sliderpoint">
                            <span></span><span class="orange"></span><span></span><span></span>
                        </div>
                    </div>
                </div>

                <div class="mui-slider-item"><a><img src="../image/publish/sample3.jpg"/></a>
                    <div class="sliderBody">
                        <span class="sliderTitle">卫 浴 展 示 图</span>
                        <br>
                        <span class="sliderSmall">卫生间和浴室设施可见并清晰整洁</span>
                        <br>
                        <span class="sliderSmaller">卫浴图必传</span>
                        <br>
                        <div class="sliderpoint">
                            <span></span><span></span><span class="orange"></span><span></span>
                        </div>
                    </div>
                </div>

                <div class="mui-slider-item"><a><img src="../image/publish/sample4.jpg"/></a>
                    <div class="sliderBody">
                        <span class="sliderTitle">厨 房 展 示 图</span>
                        <br>
                        <span class="sliderSmall">厨房整体视图，包含炤台、厨具</span>
                        <br>
                        <span class="sliderSmaller">如可做饭必传</span>
                        <br>


                        <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined toimgbtn" @click="next">
                            添加图片
                        </button>

                    </div>
                </div>
            </div>
        </div>
    </main>

    <main v-show="setPicture" class="pub_main" v-cloak>
        <div class="addimg-big">
            <div hidden>
                <span>

                </span>
                <span class="title">默认第一张为主图</span>

            </div>
            <img :alt="house_img.imgbig.txt" :style="img_rotate" :class="is_img_rotate" :src="house_img.imgbig.src">
            <!--src="../image/publish/IMG_0039.JPG"-->

            <div class="button_div" v-show="add_img_button_div">
                <button class="mui-btn mui-btn-orange " @click="moveImg_left">左移</button>
                <button class="mui-btn mui-btn-orange " @click="rotate_img">旋转</button>
                <!--<button class="mui-btn mui-btn-orange " @click="is_cover_img">设封面</button>-->
                <button class="mui-btn mui-btn-orange " @click="remark_img">备注</button>
                <button class="mui-btn mui-btn-orange " @click="dellet_img">删除</button>
                <button class="mui-btn mui-btn-orange " @click="moveImg_right">右移</button>
            </div>

            <div class="button_div" v-show="!add_img_button_div">
                <input type="text" placeholder="请输入备注" id="beizhu" v-model="house_img.imgbig.txt">
                <button class="mui-btn mui-btn-warning" @click="remark_img">备注</button>
            </div>

        </div>

        <div class="addimg-sma" id="addimg-sam" style="display: flex; flex-wrap:wrap">
            <img :src="img.src" :class={"active":img.id===house_img.imgbig.id} :alt="img.txt"
                 v-for="img in house_img.imgsmall " @click="click_img(img.id)" v-if="img.src"
                 :style="'order:'+img.order" :data-order="img.order">
            <div class="addimg_div" alt="添加" @click="addimg" style="order: 200">
                <span>+</span>
                <input type="file" name="files" multiple hidden ref="searchDom" id="addimgca" @click="imgadd">
            </div>
        </div>


        <br>
        <div class="addimg-rule" @click="if_show_mask">
            <span class="orange">
                照片审核规则
            </span><br>
            <span class="nomal">默认第一张照片为封面</span>
        </div>

        <div class="bounce_mask" v-show="mask_img_rule">
            <div class="mask_top">
                <h2>照片审核规则 </h2>
                <br>
                <p class="red">请按照要求上传，避免您发布的房源不能通过审核 </p>
                <p>1.所有照片都不能有水印、广告、联系方式</p>
                <p>2.单张照片不得小于2M</p>
                <p>3.宽高比是3:2的照片展示效果最佳，为了展示效果更美观，建议您不要上传竖图</p>
                <p>4.最少上传5张照片，最多不得超过50张照片</p>
                <p>5.客厅、卧室和卫生间照片必传（单间可无客厅照）</p>
                <p>6.若您的房源允许做饭，厨房照片也必须上传，厨房照片中请包涵灶台、厨具</p>
                <p>7.必须上传能够看到整个客厅的照片</p>
                <p>8.卧室的床品请铺盖完整，床数请和可住人数对应</p>
                <p>9.请上传整洁的卫浴设施照片</p>
            </div>

            <div class="mask_bottom" @click="if_show_mask">
                <span>完  成</span>
            </div>

        </div>
    </main>


    <main v-show="basic" class="pub_main" v-cloak>
        <div class="mui-content">
            <ul class="mui-row marrow">

                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">房源标题</span>
                    <span class="span_right span_small"><input type="text" style="width: 9rem"
                                                               v-model="stepone_send.houseTitle"
                                                               placeholder="请输入"></span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">出租类型</span>
                    <span class="span_right  span_small" id="rent_type">请选择></span>

                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">房源类型</span>
                    <span class="span_right  span_small" id="house_type">请选择></span>
                </li>
                <li class="mui-table-view-cell basicCell" @click="toLocation">
                    <span class="bigSpan">房源地址</span>
                    <span class="span_right span_small">请点击选择></span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">房屋面积</span>
                    <span class="span_right span_small">
                        <input type="text" v-model="stepone_send.houseArea" placeholder="请输入"
                               onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/">平米
                    </span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">房屋户型</span>
                    <span class="span_right span_small" id="housetype">请选择></span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">可住人数</span>
                    <span class="span_right span_small" id="peoplemax">请选择></span>
                </li>
                <li class="mui-table-view-cell basicCell" @click="bedPage(1)">
                    <span class="bigSpan">房间床数</span>
                    <span class="span_right span_small span_xsmall" id="bed_info">请点击选择床位信息></span>
                </li>
                <li class="mui-table-view-cell basicCell" @click="toInfrastructure">
                    <span class="bigSpan">基础设施</span>
                    <span class="span_right span_small">请点击查看></span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">卫生间</span>
                    <span class="span_right span_small" id="Toilet">请点击选择></span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">更换被单</span>
                    <span class="span_right span_small" id="chuangdan">请点击选择></span>
                </li>
            </ul>

            <ul class="mui-row marrow">
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">能否加床</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini " id="addbed" @click="isaddbed">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>

                <!--<li class="mui-table-view-cell basicCell ">-->
                <!--<span class="bigSpan">更换被单</span>-->
                <!--<div class="mui-switch mui-switch-orange  mui-switch-mini ">-->
                <!--<div class="mui-switch-handle"></div>-->
                <!--</div>-->
                <!--</li>-->

                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">能否加客</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini " id="addClints" @click="addClints">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>

                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan"></span>

                </li>
            </ul>
        </div>
    </main>

    <main v-show="bedSet.page1||bedSet.page2" class="pub_main" v-cloak>
        <div class="mui-content">
            <ul class="mui-row marrow center" v-show="bedSet.page1" id="bedlist_li">
                <span class="nonebed" id="none_bed">您还未添加床铺信息</span>
                <li class="mui-table-view-cell basicCell cirli" @click="bedPage(2)">
                    <span>+</span>
                </li>

            </ul>

            <ul class="mui-row marrow" v-show="bedSet.page2">
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">床型</span>
                    <span class="span_right span_small" id="bed_kind">请选择</span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">数量</span>
                    <span class="span_right span_small" id="bed_amount">请选择</span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">长度</span>
                    <span class="span_right span_small"><input type="text" placeholder="请输入"
                                                               v-model="basic_info.bedinfo.length" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 &&
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false">米</span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="bigSpan">宽度</span>
                    <span class="span_right span_small"><input type="text" v-model="basic_info.bedinfo.width"
                                                               placeholder="请输入" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 &&
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false">米</span>
                </li>
            </ul>
        </div>
    </main>


    <main v-show="infrastructure" class="pub_main" v-cloak>
        <div class="mui-content">
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">卫浴</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="5">热水淋浴</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="6">牙具</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="7">香皂</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="8">拖鞋</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="9">手纸</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="10">毛巾</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="11">沐浴露洗发露</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="12">浴缸</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>


                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">电器</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="13">电视</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="14">空调</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="15">饮水设备</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="16">冰箱</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="17">洗衣机</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="19">有线网络</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="18">无线网络</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="20">暖气</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>


                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">设施</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="21">电梯</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="22">停车位</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="23">门禁</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="28">热水</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>

                    </div>
                </li>


                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">许可</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="25">允许做饭</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="24">允许吸烟</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="26">允许携带宠物</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="27">允许聚会</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>

                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">服务</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="34">机场火车站接送</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="35">导游</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>

                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">其他</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left"><input type="text" placeholder="请填写" v-model="stepone_send.other"></span>
                    <span class="span_right span_small"></span>
                </li>
            </ul>
        </div>
    </main>


    <main v-show="introduce" class="pub_main" v-cloak>
        <div class="mui-content introduce">
            <ul class="mui-row ">
                <!--<li class="mui-table-view-cell  bigcell" @click="introduceChild(1)">-->
                <!--<span class="bigSpan">房源标题</span>-->
                <!--<span class="rightSpan">未填写></span>-->
                <!--<br>-->
                <!--<span class="smallSpan">突出房源特色和地理位置</span>-->
                <!--</li>-->
                <li class="mui-table-view-cell  bigcell" @click="introduceChild(2)">
                    <span class="bigSpan">房源介绍</span>
                    <span class="rightSpan">点击查看></span>
                    <br>
                    <span class="smallSpan">详细介绍房源或个人寄语</span>
                </li>
                <li class="mui-table-view-cell  bigcell" @click="introduceChild(3)">
                    <span class="bigSpan">交通路线</span>
                    <span class="rightSpan">点击查看></span>
                    <br>
                    <span class="smallSpan">指导房客更方便快捷地到达住所</span>
                </li>
                <li class="mui-table-view-cell  bigcell" @click="introduceChild(4)">
                    <span class="bigSpan">周边情况</span>
                    <span class="rightSpan">点击查看></span>
                    <br>
                    <span class="smallSpan">介绍房源周边环境和便利设施</span>
                </li>
                <li class="mui-table-view-cell  warncell">
                    <span>所有文字描述不能出现个人联系方式（电话、微信、QQ、邮箱等），否则不予通过审核</span>
                </li>
            </ul>
        </div>
    </main>

    <main v-show="setIntroduce" class="pub_main" v-cloak>
        <div class="textarea_body">
             <textarea v-show="intro_text.area1" v-model="stepone_send.houseTitle" cols="30" rows="10"
                       class="textarea textarea_big" :placeholder="text_content">

             </textarea>
            <textarea v-show="intro_text.area2" v-model="house_describ.house_desc" cols="30" rows="10"
                      class="textarea textarea_big" :placeholder="text_content">

             </textarea>
            <textarea v-show="intro_text.area3" cols="30" rows="10" class="textarea textarea_big"
                      :placeholder="text_content" v-model="house_describ.house_communication">

             </textarea>
            <textarea v-show="intro_text.area4" cols="30" rows="10" class="textarea textarea_big"
                      :placeholder="text_content" v-model="house_describ.house_surrounding">

             </textarea>


            <br>
            <span>0</span><span>/{{textarea_number_max}}</span>
        </div>
    </main>

    <main v-show="chargeRule.main" class="pub_main" v-cloak>
        <div class="mui-content" v-show="chargeRule.menu">
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell groupCell small">
                    <span class="span_left">价格设置</span>
                </li>
                <li class="mui-table-view-cell infraCell" @click="chargeRuleType(1)">
                    <span class="span_left">每日价格</span>
                    <span class="span_right small">点击查看</span>
                </li>
                <li class="mui-table-view-cell infraCell" @click="chargeRuleType(2)">
                    <span class="span_left">押金收取</span>
                    <span class="span_right">点击查看</span>
                </li>
                <li class="mui-table-view-cell infraCell" @click="chargeRuleType(3)">
                    <span class="span_left">其他费用（选填）</span>
                    <span class="span_right">点击查看</span>
                </li>
                <li class="mui-table-view-cell groupCell small">
                    <span class="span_left">交易规则</span>
                </li>
                <li class="mui-table-view-cell infraCell" @click="chargeRuleType(4)">
                    <span class="span_left">退款规则</span>
                    <span class="span_right">点击查看</span>
                </li>
                <li class="mui-table-view-cell groupCell small">
                    <span class="span_left">入住须知</span>
                </li>

                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">最少入住天数</span>
                    <span class="span_right span_width" id="least_day"></span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">最多入住天数</span>
                    <span class="span_right span_width" id="most_day">未选择</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">是否接待外宾</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini " id="forein_goust"
                         @click="is_forein_goust">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">是否提供发票</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini " id="invoice" @click="is_invoice">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">房东要求（选填）</span>
                    <span class="span_right"><input type="text" placeholder="请填写"
                                                    v-model="publish_rule.saveMsg.require"></span>
                </li>
            </ul>
        </div>

        <div class="mui-content" v-show="chargeRule.type1">
            <ul class="mui-row marrow">

                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">每日价格</span>
                    <span class="span_right"><input type="text" v-model="publish_rule.saveMsg.price" placeholder="请填写"
                                                    onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 &&
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false">每天</span>
                </li>
                <li class="mui-table-view-cell groupCell small">
                    <span class="span_left"></span>
                </li>

                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">周末特价</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini " id="isDiscountWe"
                         @click="weekendSapecial">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" id="wekends">点击选择▽</span>
                    <span class="span_right"><input type="text" placeholder="请填写"
                                                    v-model="publish_rule.saveMsg.discount_price" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 &&
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false">每天</span>
                </li>


                <li class="mui-table-view-cell groupCell small">
                    <span class="span_left"></span>
                </li>

                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">七天优惠优惠</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini " id="rent_long_days"
                         @click="ren_long_days">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">连续住7天以上</span>
                    <span class="span_right"><span id="day7">请点击选择</span>  折</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">30天优惠</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini " id="rent_long_days1"
                         @click="ren_long_days1">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">连续住30天以上</span>
                    <span class="span_right"><span id="day30">请点击选择</span>  折</span>
                </li>

            </ul>
        </div>


        <div class="mui-content" v-show="chargeRule.type2">
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">在线收取押金</span>
                    <span class="span_right"><input type="text" placeholder="请填写"
                                                    v-model="publish_rule.saveMsg.pledgeAmount" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 &&
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false">元</span>
                </li>
                <li class="mui-table-view-cell groupCell small">
                    <span class="span_left"></span>
                </li>

                <li class="textcell">
                    <span class="smallspan">为了保障您和房客双方的权益，请合理收取押金</span>
                    <span class="bigspan">为什么在线收取押金？</span>
                    <span class="smallspan">收取押金是为了保障房东财产安全，在线收取是为了同时保障双方权益，避免产生扣押纠纷。房客支付押金后，由分享家短租平台代为保管。房客退房后若房东没有申请扣押则全款退回给房客；若房东申请扣押且房客同意则将扣除部分打给房东，其余退还房客；若双方在扣押未达成一致时，则由平台介入处理。</span>
                </li>

            </ul>
        </div>


        <div class="textarea_body" v-show="chargeRule.type3">
             <textarea name="" cols="30" rows="10" class="textarea textarea_big" placeholder="其他费用
如水费、电费、燃气费、清洁费等您需要单独收取的费用，不填写则默认不收取" v-model="publish_rule.saveMsg.attachment_fare">

             </textarea>
            <br>
            <span>0</span><span>/500</span>
            <br>
            <span class="warn">注：其他费用需要您线下收取，平台不收取</span>
        </div>


        <div class="mui-content" v-show="chargeRule.type4">
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell groupCell big">
                    <span class="span_left">入住前取消订单</span>
                    <br>
                    <span class="small">距离入住当天14:00前，1天=24小时</span>
                </li>

                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">房客提前</span>
                    <span class="span_medio"><input type="text" placeholder="____"
                                                    v-model="publish_rule.saveMsg.cancelPaddingDate" onKeyPress="if (
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false"></span>
                    <span class="span_right">天，取消订单可退还全部押金    </span>
                </li>

                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">否则扣除</span>
                    <span class="span_medio"><input type="text" placeholder="____"
                                                    v-model="publish_rule.saveMsg.noUseDate" onKeyPress="if (
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false"></span>
                    <span class="span_right">天，定金作为违约金支付房东</span>
                </li>

                <li class="mui-table-view-cell groupCell big">
                    <span class="span_left">入住后提前退房</span>
                    <br>
                    <span class="small">入住当天14:00后视为已入住，不可取消订单</span>
                </li>

                <li class="mui-table-view-cell infraCell">
                    <span class="span_left">扣取押金天数为</span>
                    <span class="span_right"><input type="text" placeholder="请填写"
                                                    v-model="publish_rule.saveMsg.noUseDate" onKeyPress="if (
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false">天</span>
                </li>


            </ul>
        </div>
    </main>


    <!--<main v-show="succese_page" class="pub_main" id="succese_page" v-cloak>
        <div class="succese_div">
            <p class="">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-finish"></use>
                </svg>
            </p>
            <p class="p_strong">房源发布成功!</p>
            <p class="p_small">平台将在1个工作日内审核，审核通过后即可上线</p>
            <p class="p_small">请耐心等待</p>
            <p class="p_orange">查 看 房 源 ></p>
        </div>
    </main>-->


    <footer class="pub_foot" @click="send_stepone_send()" v-show="this.basic">
        <h1 class="fxj-title">完成</h1>
    </footer>
    <footer class="pub_foot" @click="send_house_describ()" v-show="this.introduce">
        <h1 class="fxj-title">完成</h1>
    </footer>
    <footer class="pub_foot" @click="sen_img_info()" v-show="this.setPicture">
        <h1 class="fxj-title">完成</h1>
    </footer>
    <footer class="pub_foot" @click=" send_publish_rull()" v-show="chargeRule.menu">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="toBasic" v-show="location&&!add_address_page">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="send_address" v-show="location&&add_address_page">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" v-show="succese_page">
        <h1 class="fxj-title">完成</h1>
    </footer>


    <footer class="pub_foot" @click="chargeRuleType(5)" v-show="chargeRule.footer">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="bedPage(3)" v-show="bedSet.page1">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="addBedFun" v-show="bedSet.page2">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="getInfrastructure" v-show="infrastructure">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="introduceChild(0)" v-show="setIntroduce">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot_sub" v-show="mainpage">

        <span class="button_two" style="width: 40%;text-align: center">发布房源</span>
        |
        <span class="button_two" style="width: 40%;text-align: center">删除房源</span>
    </footer>

    <footer class="pub_foot" v-show="">
        <span class="fxj-title">添加照片</span>

    </footer>

</main>
@import "js.html"
<script src="../lib/js/city.js"></script>
<script src="../script/mobileSelect.js"></script>
<script src="../script/houseManage.js"></script>
</body>

@import "footer.html"